// web/src/components/learn/file-upload.tsx
'use client';
import React, {useRef, useState} from 'react';
import {PhotographIcon} from "@heroicons/react/outline";
import {File as FileIcon} from "lucide-react";

interface Props {
    // onChange: (url?: string) => void;
    onChange: (file?: File) => void;
    // endpoint:keyof typeof ourFileRouter
    accept: string
}

const FileUpload = ({onChange, accept}: Props) => {
    // 触发input传图片
    const filePickerRef = useRef(null)

    return (
        <div className={`flex`}>
            {/*@ts-ignore*/}
            <div onClick={() => filePickerRef.current.click()}>
                {/*<PhotographIcon*/}
                {/*    className={`size-10 hoverEffect p-2 text-sky-500 hover:bg-sky-100`}/>*/}
                <FileIcon
                    className={`size-10 hoverEffect p-2 text-sky-500 hover:bg-sky-100`}/>
                <input
                    accept={accept}
                    type="file"
                    hidden
                    ref={filePickerRef}
                    // @ts-ignore
                    onChange={(e) => onChange(e.target.files[0])}
                />
            </div>
        </div>
    );
};

export default FileUpload;